<template>
    <common-page title="注册账号">
        <el-steps :active="stepActive" simple finish-status="success">
            <el-step title="填写信息" />
            <el-step title="完成注册" />
        </el-steps>
        <el-form
            v-if="stepActive == 0"
            ref="registerForm"
            class="mt-[20px]"
            :model="formData"
            :rules="formRules"
            label-width="0"
            size="large"
        >
            <el-form-item prop="account">
                <el-input
                    v-model="formData.account"
                    clearable
                    placeholder="请输入账号/手机号，长度应为6-20，包含数字、字母、下划线"
                >
                    <template #prepend>
                        <el-button :icon="User" />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                    v-model="formData.password"
                    clearable
                    show-password
                    placeholder="请输入密码，长度应为6-16，包含字母、数字、特殊符号"
                >
                    <template #prepend>
                        <el-button :icon="Lock" />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password2">
                <el-input
                    v-model="formData.password2"
                    clearable
                    show-password
                    placeholder="请再次输入密码"
                >
                    <template #prepend>
                        <el-button :icon="Lock" />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="mobile">
                <el-input
                    v-model="formData.mobile"
                    clearable
                    placeholder="请输入手机号"
                >
                    <template #prepend>
                        <el-button :icon="Iphone" />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input
                    v-model="formData.code"
                    clearable
                    placeholder="请输入短信验证码"
                >
                    <template #prepend>
                        <el-button :icon="Unlock" />
                    </template>
                    <template #append>
                        <div class="pl-2 pr-2">
                            <SmsCode
                                :count="60"
                                :sendCodeApi="sendSmsCode"
                                :apiParams="{
                                    scene: 'user_register',
                                    mobile: formData.mobile,
                                }"
                            />
                        </div>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="isAgreement" size="small">
                    <span class="text-tx-secondary text-sm">
                        已阅读并同意
                        <NuxtLink
                            :to="{ path: '/agreement', query: { type: 1 } }"
                            custom
                            v-slot="{ href }"
                        >
                            <a
                                class="text-tx-primary"
                                :href="href"
                                target="_blank"
                            >
                                《服务协议》
                            </a>
                        </NuxtLink>
                        和
                        <NuxtLink
                            class="text-tx-primary"
                            :to="{ path: '/agreement', query: { type: 2 } }"
                            custom
                            v-slot="{ href }"
                        >
                            <a
                                class="text-tx-primary"
                                :href="href"
                                target="_blank"
                            >
                                《隐私政策》
                            </a>
                        </NuxtLink>
                    </span>
                </el-checkbox>
            </el-form-item>
            <el-form-item class="flex justify-center">
                <el-button
                    type="primary"
                    :loading="lock"
                    @click="handleRegister"
                    >注册提交</el-button
                >
            </el-form-item>
        </el-form>
        <el-result
            v-if="stepActive == 1"
            icon="success"
            title="注册成功"
            sub-title="可以使用账号以及手机号登录"
        >
            <template #extra>
                <NuxtLink :to="{ path: '/login' }">
                    <el-button type="primary">返回登录</el-button>
                </NuxtLink>
            </template>
        </el-result>
    </common-page>
</template>

<script lang="ts" setup>
import { User, Lock, Iphone, Unlock } from "@element-plus/icons-vue";
import { messageSuccess, messageError } from "@/utils/message";
import { register, sendSmsCode } from "@/api/login";
import { isMobile } from "@/utils/validate";
import commonPage from "./components/page.vue";

definePageMeta({
    layout: false,
    middleware: ["login"],
});

const stepActive = ref(0);

const registerForm = ref(null);

const isAgreement = ref(false);

const formData = reactive({
    account: "",
    password: "",
    password2: "",
    mobile: "",
    code: "",
    channel: 4,
});

const formRules = {
    account: [
        { required: true, message: "请输入账号/手机号", trigger: "blur" },
    ],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    password2: [
        {
            validator(rule: any, value: any, callback: any) {
                if (value === "") {
                    callback(new Error("请再次输入密码"));
                } else if (value !== formData.password) {
                    callback(new Error("两次输入的密码不一致"));
                } else {
                    callback();
                }
            },
            trigger: ["change", "blur"],
        },
    ],
    mobile: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        {
            validator(rule: any, value: any, callback: any) {
                if (!isMobile(value)) {
                    callback(new Error("手机号不符合要求"));
                } else {
                    callback();
                }
            },
            trigger: ["change", "blur"],
        },
    ],
    code: [
        { required: true, message: "请输入短信验证码", trigger: "blur" },
        {
            min: 6,
            max: 6,
            message: "验证码长度应为6",
            trigger: ["change", "blur"],
        },
    ],
};

const { lock, apiCall: apiRegister } = useApiLock(register);
const handleRegister = async () => {
    await registerForm.value?.validate();
    if (!isAgreement.value) {
        messageError("确认已阅读并同意《服务协议》和《隐私政策》");
        return;
    }
    await apiRegister(formData);
    stepActive.value = 1;
    messageSuccess("注册成功");
};
</script>
